import { addNumberAction, subNumberAction } from "@/store/modules/counter"
import { connect } from "react-redux"

const Index = function (props) {
  const { count, myAddNumber, mySubNumber } = props
  const addNumber = (n) => {
    myAddNumber(n)
  }
  const subNumber = (n) => {
    mySubNumber(n)
  }
  return (
    <div>
      <button onClick={() => addNumber(1)}>+1</button>
      <p>{count}</p>
      <button onClick={() => subNumber(1)}>+1</button>
    </div>
  )
}

const mapStateToProps = (state) => ({
  count: state.counter.count
})
const mapDispatchToProps = (dispatch) => ({
  myAddNumber(n) {
    dispatch(addNumberAction(n))
  },
  mySubNumber(n) {
    dispatch(subNumberAction(n))
  }
})
export default connect(mapStateToProps, mapDispatchToProps)(Index)
